<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>永和小票</title>
		<!--样式设计-->
		<style>
			body{/*对整个页面进行修饰*/
				width:310px;
			    font-size: 10px; /*字体大小*/
			}
			/*对于单独样式进行设置,利用class给div设置一个标识，前面要加.*/
			.please{
				font-size: 24px;
				font-weight: bold;/*加粗*/
			}
			.self{
				/*padding会修饰四周，顺时针四周空，顺序：上右下左*/
				/*左边空一定距离*/
				padding-left: 100px;
			}
			#result{
				padding-left: 100px;
			}
			hr{border: 1px dashed;}
			.note{
				/*padding-top: 20px;
				padding-bottom: 15px;*/
				margin-top: 20px;
				margin-bottom: 15px;
			}
			.mg{
				padding-left: 50px;
			}
		</style>
	</head>
	<body>
		<div>顾客联</div>
		<div class="please">请您留意取餐账单号</div>
		<div class="self">自取顾客联</div>
		<div>永和大王(北三环西路店)</div>
		<div>15951265782</div>
		<div id="result">--结账单--</div>
		<div class="please">账单号：p000010</div>
		<div>账单类型：堂食</div>
		<div>人数：1</div>
		<div>收银员：王东杰</div>
		<div>开单时间：2021-1-12</div>
		<div>结账时间：2021-2-15</div>
		<!-- 表格没有列的概念，他叫做单元格
		  页面中换行会被解析为一个空格，用<br>
		  align横向的排列：left居左，center居中，right右
		  valign纵向排列：top居上，center居中，bottom居下
		-->
		<hr/>
		<table border="0">
			<tr>
				<td width="50" align="left">数量</td>
				<td width="190">品相</td>
				<td width="50" align="right">金额</td>
			</tr>
			<tr>
				<td valign="top">1</td>
				<td>玉米肉松蛋饼两片<br />
				    1   x --玉米肉松蛋饼<br />
					1   x --现磨豆浆（热/甜）
				</td>
				<td valign="top" align="right">8.0</td>
			</tr>
			
		</table>
		<hr/>
		<table border="0">
			<tr>
				<td width="246">合计</td>
				<td width="50" align="right">8.00</td>
			</tr>
			<tr>
				<td>微支付</td>
				<td align="right">8.00</td>
			</tr>
		</table>
		<hr />
		<div>打印时间:2020-05-18  17:20:25</div>
		<hr />
	
		<!--&nbsp代表一个空格。7个空格等价于两个汉字的距离
		div标签会自动换行，span标签不会换行，相当于Java中的print
		-->
		<div class="note"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据相关税法规定，
		电子发票的开票日期同网上申请电子发票的日期，
		如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，
		根据指引步骤开具您的增值税电子普通发票。
		此二维码30天有效，扫描时请保持小票平整。</div>
		<!--引入图片,设置宽度，高度会自动缩放-->
		<img class="mg" src="images/qr.png" width="200"/>
		<div> 官网：www.yonghe.com</div>
		<div>加盟热线：86-21-12345678</div>
		<br />
	</body>
</html>
